<template>
  <div id="cesiumContainer" class="cesiumContainer"></div>
</template>

<script>
import * as viewerMap from "../components/cesium";
export default {
  data() {
    return {
      viewer: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initCesium("cesiumContainer");
    });
  },
  methods: {
    initCesium() {
      viewerMap.initCesiumMap("cesiumContainer");

      // ==================== 使用 Entity API 添加点线面 ====================
      // 添加点
    //   viewerMap.addEntityPoint()
      // 添加线
    //   viewerMap.addEntityLine()
      // 添加半透明多边形
    //   viewerMap.addEntityPolygonDiaphaneity()
      // 添加红色多边形（带洞）
    //   viewerMap.addEntityPolygon()

      // ==================== 使用 Primitive API 添加点线面 ====================
      // 添加点
    //   viewerMap.addPrimitivePoint()
      // 添加线
    //   viewerMap.addPrimitiveLine()
      // 添加面
    //   viewerMap.addPrimitivePolygon()

      //   添加图片标记点
    //   viewerMap.addImgPoint()

      //   添加glb模型
    //   viewerMap.addGLB()

      // 添加使用glb模型进行实时轨迹
        // viewerMap.addGlbTrajectory()

      // 添加使用图片进行实时轨迹
      viewerMap.addImgTrajectory();
      this.viewer = viewerMap.getViewerMap();
    },
    clear(){
        viewerMap.clearIntervalEvent();
    }
  },
  beforeUnmount() {
    this.clear()
  },
};
</script>

<style lang="scss">
.cesiumContainer {
  width: 100%;
  height: 100%;
  background-color: black;
}
</style>
